<template>
  <div>
    <el-checkbox v-model="branchExpand" @change="handleCheckedTreeExpand($event)">展开/折叠</el-checkbox>
    <el-checkbox v-model="branchNodeAll" @change="handleCheckedTreeNodeAll($event)">全选/全不选</el-checkbox>
    <el-checkbox v-model="branchCheckStrictly" @change="handleCheckedTreeConnect($event)">父子联动</el-checkbox>
    <el-tree
    class="tree-border"
    :style="{maxHeight}"
    :data="branchDataOptions"
    show-checkbox
    ref="branch"
    node-key="branchCode"
    :check-strictly="!branchCheckStrictly"
    :props="defaultProps"
    :default-checked-keys="defaultCheckedKeys"
  />
  </div>
</template>

<script>
export default {
  name: "selectBranch",

  props: {
    defaultCheckedKeys:{
      type: Array,
      default(){
        return []
      }
    },
    maxHeight:{
      type: String,
      default: '260px'
    }
  },

  data() {
    return {
      branchExpand: false,
      branchNodeAll: false,
      branchCheckStrictly: false,
      // 网点列表
      branchOptions: [],
      form: {},
      defaultProps: {
        children: "children",
        label: "branchName"
      },
    }
  },
  computed: {
    branchDataOptions() {
      return this.$store.state.device.branchDataOptions || [];
    }
  },
  methods: {
    // 重新选项配置
    resetOptions(){
      this.branchExpand = false;
      this.branchNodeAll = false;
      this.branchCheckStrictly = false;
      // 清空所有之前已选中
      this.$refs.branch.setCheckedKeys([]);
    },
    // 树权限（展开/折叠）
    handleCheckedTreeExpand(value) {
      let treeList = this.branchDataOptions;
      for (let i = 0; i < treeList.length; i++) {
        this.$refs.branch.store.nodesMap[treeList[i].branchCode].expanded = value;
      }
    },
    // 树权限（全选/全不选）
    handleCheckedTreeNodeAll(value) {
      this.$refs.branch.setCheckedNodes(value ? this.branchDataOptions : []);
    },
    // 树权限（父子联动）
    handleCheckedTreeConnect(value) {
      this.branchCheckStrictly = value ? true : false;
    },
    // 所有选中节点数据
    getAllCheckedKeys() {
      // 目前被选中的菜单节点
      let checkedKeys = this.$refs.branch.getCheckedKeys();
      // console.log("目前被选中的菜单节点",checkedKeys)
      // 半选中的菜单节点
      let halfCheckedKeys = this.$refs.branch.getHalfCheckedKeys();
      // console.log("半选中的菜单节点",halfCheckedKeys)
      checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
      return checkedKeys;
    },
  },


}
</script>

<style lang="scss" scoped>
.tree-border {
  min-height: 100px;
  padding: 5px 0;
  overflow-y: auto;
}
</style>
